<!-- 分销排行 -->
<template>
	<view class="rankings-wrap">
		<!-- 标题栏 -->
		<!-- <shopro-navbar back-icon-color="#fff"
			:background="{}"
			:backTextStyle="{ color: '#fff', fontSize: '40rpx', fontWeight: '500' }"
			backText="分销排行榜"></shopro-navbar> -->
		<view class="u-flex nav u-p-t-20">
			<view v-for="(item,index) in dateType"
				:key="index"
				class="u-flex-1 item"
				:class="{'active':dateTypeCurrent == index}"
				@click="dateTypeChange(index)">
				{{item}}
			</view>
		</view>
		<view class="u-flex nav u-m-t-50">
			<view v-for="(item,index) in orderType"
				:key="index"
				class="u-flex-1 item"
				:class="{'active':orderTypeCurrent == index}"
				@click="orderTypeChange(index)">
				{{item}}
			</view>
		</view>
		<!-- 排行榜 -->
		<view class="rankings-list-box">
			<scroll-view scroll-y="true"
				@scrolltolower="loadMore"
				class="scroll-box">
				<view class="ranking-list u-flex u-row-between"
					v-for="(item, index) in rankingsList"
					:key="index"
					@click="goTeam(item)">
					<view class="list-left u-flex">
						<view class="tag-box u-flex u-row-center u-col-center">
							<text class="tag-text"
								v-if="index >= 3">{{ index + 1 }}</text>
							<image v-else
								class="tag-icon"
								:src="rankingsIcon[index]"
								mode=""></image>
						</view>
						<image class="user-avatar"
							:src="item.user ? item.user.avatar : $IMG_URL + '/imgs/base_avatar.png'"
							mode=""></image>
						<view class="user-info">
							<view class="name u-m-b-10">{{ item.user ? item.user.nickname : '当前用户已注销' }}</view>
							<view class="date">
								{{item.apply_info.mobile}}
							</view>
						</view>
					</view>
					<view class="list-right y-end">
						<view class="num u-m-b-10">{{ item.order_count }}单</view>
						<view class="des">推广订单</view>
					</view>
				</view>
				<!-- 更多 -->
				<u-loadmore height="80rpx"
					:status="loadStatus"
					icon-type="flower"
					color="#ccc" />
				<view class="hack-box"
					style="height: 200rpx;width: 100%;"></view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				rankingsIcon: {
					0: this.$IMG_URL + '/imgs/commission/01.png',
					1: this.$IMG_URL + '/imgs/commission/02.png',
					2: this.$IMG_URL + '/imgs/commission/03.png'
				},
				rankingsList: [], //排行榜
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				dateType: ["今日", "本周", "本月"],
				dateTypeCurrent: 0,
				orderType: ["个人订单", "经理订单", "队长订单"],
				orderTypeCurrent: 0
			};
		},
		computed: {
			...mapGetters(['agentInfo'])
		},
		onLoad() {
			this.getRankings();
		},
		methods: {
			goTeam(info) {
				if (this.agentInfo.level == 5) {
					this.$Router.push("/pages/app/commission/team?user_id=" + info.user.id)
				}
			},
			dateTypeChange(index) {
				this.dateTypeCurrent = index
				this.getRankings();
			},
			orderTypeChange(index) {
				this.orderTypeCurrent = index
				this.getRankings();
			},
			getRankings() {
				let that = this;
				that.rankingsList = []
				that.loadStatus = 'loading';
				that.$http('commission.ranking', {
					date_type: this.dateTypeCurrent,
					order_type: this.orderTypeCurrent
				}).then(res => {
					if (res.code === 1) {
						that.rankingsList = res.data
						that.loadStatus = "nomore"
					}
				});
				// that.$http('commission.ranking', {
				// 	page: that.currentPage
				// }).then(res => {
				// 	if (res.code === 1) {
				// 		that.rankingsList = [...that.rankingsList, ...res.data.data];
				// 		that.lastPage = res.data.last_page;
				// 		that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				// 	}
				// });
			},
			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getRankings();
				}
			}
		}
	};
</script>
<style lang="scss"
	scoped>
	.nav {
		color: #fff;
		text-align: center;

		.active {
			position: relative;
		}

		.active::after {
			content: '';
			width: 30%;
			height: 4rpx;
			background: #fff;
			position: absolute;
			left: 35%;
			bottom: -10rpx;
			border-radius: 10rpx;
		}
	}

	.rankings-wrap {
		background: url($IMG_URL+'/imgs/commission/rankings_bg.png') no-repeat;
		background-size: 100% auto;
		height: 100%;
		overflow: hidden;
	}

	// 排行榜列表
	.rankings-list-box {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		width: 690rpx;
		height: 100%;
		margin: 60rpx auto 0;

		.scroll-box {
			height: 100%;
		}

		.ranking-list {
			height: 140rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.list-left {
				.tag-box {
					width: 50rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #beb4b3;
					margin-right: 20rpx;

					.tag-icon {
						width: 40rpx;
						height: 60rpx;
					}
				}

				.user-avatar {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}

				.user-info {
					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					.date {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.list-right {
				.num {
					font-size: 30rpx;
					font-weight: 500;
					color: #5e4ddf;
				}

				.des {
					font-size: 24rpx;
					font-weight: 500;
					color: #a09a98;
				}
			}
		}
	}
</style>